<template>
  <div class="login">
    <div id="stt" @click="$router.push('/')">
      <van-icon name="arrow-left" />
    </div>
    <div class="bgimg"></div>
    <div class="popup">
      <h4>找回密码</h4>
      <van-cell-group :border="false">
        <van-field placeholder="请输入用户昵称" :border="false" v-model="uname">
          <i class="iconfont icon-yonghu" slot="left-icon"></i>
        </van-field>

        <van-field placeholder="请输入手机号" :border="false" v-model="phone">
          <i id="box" class="iconfont icon-yonghu" slot="left-icon"></i>
        </van-field>

        <van-field placeholder="请设置密码" type="password" v-model="password">
          <i class="iconfont icon-mima1" slot="left-icon"></i>
        </van-field>
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="onSubmit"
          >确认</van-button
        >
      </van-cell-group>
      <div></div>
    </div>
    <div class="divider">
      <van-divider :style="{ color: '#757171', borderColor: '#b3b3b3' }">
        其他方式找回
      </van-divider>
    </div>
    <div>
      <i class="iconfont icon-qq"></i>
      <i class="iconfont icon-weibo"></i>
      <i class="iconfont icon-weixin"></i>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

import { useCssModule } from "vue";
import { Obtaining } from "@/api/request";
import { find } from "@/api/login";
export default {
  data() {
    return {
      uname: "",
      password: "",
      phone: "",
    };
  },
  methods: {
    // 登录
    onSubmit() {
      if (!this.uname) {
        return Toast.fail({ message: "请输入用户昵称!" });
      }
      if (this.uname.length < 3 || this.uname.length > 6) {
        return Toast.fail({ message: "用户昵称输入不合法!" });
      }
      if (!this.password) {
        return Toast.fail({ message: "请输入密码!" });
      }
      if (this.password.length < 6 || this.password.length > 12) {
        return Toast.fail({ message: "密码格式不正确!" });
      }
      if (!this.phone) {
        return Toast.fail({ message: "请输入手机号!" });
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        return Toast.fail({ message: "手机格式不正确!" });
      }

      // 验证通过，发起请求校验密码
      find({
        uname: this.uname,
        password: this.password,
        phone: this.phone,
      }).then((res) => {
        console.log(res);
        console.log(res.data.status);
        if (res.data.status != 200) {
          return Toast.fail({ message: res.data.message });
        }
        // 将登录成功生成的token保存到localStorage中

        // 跳转到首页
        this.$router.push("/");
        return Toast.fail({ message: "修改成功跳转到登录页面" });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#stt {
  z-index: 10;
  font-size: 20px;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
}
.bgimg {
  position: relative;
  bottom: 30px;
}
.popup {
}
::v-deep .van-field__left-icon {
  color: #ffca0d;
  //   color: #b3b3b3;
}
#btn {
  position: relative;
  bottom: 10px;
  height: 25px;
  > span {
    font-size: 10px;
  }
}
</style>
